<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
    <script src="./node_modules/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{count}}

      <button @click="handleClick">click</button>

      <div>{{ msg }} - {{msg1}} - {{msg2}}</div>
    </div>
    <script>
      // 观察
      const app = new Vue({
        el: "#app",
        data: {
          count: 0,
          msg: "",
          msg1: "",
          msg2: "",
          user: {
            name: "xiaohong",
            age: 18,
          },
        },
        methods: {
          handleClick() {
            this.count++;
          },
        },
        watch: {
          "user.age"(val) {
            console.log("age", val);
          },
          // user: {
          //   handler(newVal, oldVal) {
          //     //   // watch -》
          //     console.log("user", newVal, oldVal);
          //   },
          //   deep: true,
          // },
          // user(newVal, oldVal) {
          //   // watch -》
          //   console.log("user", newVal, oldVal);
          // },
          count: {
            handler(newVal, oldVal) {
              // 不会一上来就调用
              // 赖执
              console.log("count", newVal, oldVal);
              // 1. fetch api -> 拉去最新的数据
              // 2.
              this.msg = newVal + ":msg";
              this.msg1 = newVal + ":msg1";
              this.msg2 = newVal + ":msg2";
            },
            immediate: true,
          },

          // count(newVal, oldVal) {
          //   // 不会一上来就调用
          //   // 赖执
          //   console.log("count", newVal, oldVal);
          //   // 1. fetch api -> 拉去最新的数据
          //   // 2.
          //   this.msg = newVal + ":msg";
          //   this.msg1 = newVal + ":msg1";
          //   this.msg2 = newVal + ":msg2";
          // },
        },
      });

      console.log(app);
    </script>
  </body>
</html>
